<template>
	<!-- 记录列表组件 -->
	<view class="record-list" @click="_click(obj.id)">
		<view class="left-box">
			<view class="title">
				<text>{{obj.address}}</text>
			</view>
			<view class="date-box">
				<text>{{obj.create_time}}</text>
			</view>
		</view>
		<view class="right-box">
			<view class="right-box-left">
				<view class="price">
					<text>{{Number(obj.number)}}</text>
				</view>
				<view class="state" :class="obj.status === 2? 'fall': ''">
					{{obj.status | type(i18n)}}
				</view>
			</view>
			<u-icon name="arrow-right" color="rgba(255, 255, 255, .4)" size="24"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			obj: {
				type: Object,
				default: () => {}
			}
		},
		filters: {
			type(val,i18n) {
				let name = '';
				switch (val) {
					case 2:
					name = i18n.common.fail;
					break;
					case 1:
					name = i18n.common.pending;
					break;
					case 3:
					name = i18n.common.success;
					break;
				}
				return name;
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		methods: {
			_click(id) {
				this.$emit('click', id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record-list {
		display: flex;
		justify-content: space-between;
		height: 120rpx;
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
		color: #fff;
		font-size: 28rpx;

		.left-box {
			// .title {
			// 	white-space: nowrap;
			// 	text-overflow: ellipsis;
			// 	overflow: hidden;
			// 	word-break: break-all;
			// }
			.date-box {
				color: rgba(255, 255, 255, .54);
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}

		.right-box {
			display: flex;

			.right-box-left {
				margin-right: 30rpx;

				.state {
					text-align: right;
					color: rgba(255, 255, 255, .54);

					&.fall {
						width: 100%;
						color: rgba(255, 53, 84, .54);
					}
				}
				
				.price {
					font-weight: bold;
				}

			}

		}
	}
</style>
